*::selection {
  background: rgba(19, 72, 87, 1.0);
  color: rgba(255, 255, 255, 1.0);
  text-shadow: none;
  //background-image: linear-gradient(to top, #ff7675, #fab1a0, #81ecec);
  //animation-name: scrossTurn;
  //animation-duration: 5s;
  //animation-play-state: running;
  //animation-iteration-count: infinite;
  //animation-timing-function: cubic-bezier(0.72, 0.01, 1, 1);
  //animation-delay: 0s;
}


.flex-side-container {
  position: relative;
  flex: 0 auto;
  min-width: 25vw;
  height: 100vh;
  //background: blue  ;
}

.side-container {
  position: fixed;
  width: 25vw;
  height: 100vh;
  right: 0px;
  //background: blue  ;
  transform-style: preserve-3d;

  .site-title {
    font-family: "Noto Serif SC", "HiraMinProN-W6", "Source Han Serif CN", "Source Han Serif SC", "Source Han Serif TC", serif !important;
    position: absolute;
    box-sizing: border-box;
    padding-top: 10px;
    width: auto;
    height: auto;
    top: 40px;
    left: 30px;
    writing-mode: vertical-rl;
    //background-color: red ;
    user-select: none;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.08);
    border-left: solid #606975 2px;
    transition: 0.8s;
    backface-visibility: hidden;

    h3 {
      font-weight: 300;
      letter-spacing: 2px;
      color: #b2bec3;
      transition: 0.8s;
      line-height: 30px;
      padding-right: 8px;
    }

    .a-title {
      cursor: pointer;
      color: #636e72;
      font-size: 32px;
      line-height: 60px;
      font-weight: 900;
      margin-top: 0;
      margin-left: 10px;
      text-decoration: none;
      background-color: transparent;
      transition: 0.8s;
    }

    .myIcon {
      position: absolute;
      width: 50px;
      height: 50px;
      bottom: 10px;
      left: 3px;
      background: center/cover no-repeat;
      background-image: url("../img/myIcon.png");
    }

    &:hover {
      background: #2d3436;
      border-left: solid transparent 2px;
      padding-top: 30px;
    }

    &:hover h3 {
      color: #f1f2f6;
    }

    &:hover .a-title {
      color: #f1f2f6;
    }

    &:hover .myIcon {
      background: transparent;
    }
  }

  .category-page {
    position: absolute;
    display: flex;
    width: 150px;
    height: 360px;
    top: 40px;
    left: 30px;
    //background: red ;
    border-right: solid #606975 2px;
    transition: 0.8s;
    transform: rotateY(180deg);
    backface-visibility: hidden;

    .category-ul {
      position: relative;
      display: flex;
      width: auto;
      height: 100%;
      flex-direction: column;
      list-style: none;
      user-select: none;
      font-family: "Josefin Sans Light", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "'Hiragino Sans GB", STHeiti, "Microsoft Yahei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", Arial, Verdana, sans-serif;
      color: #606975;

      li {
        box-sizing: border-box;
        position: relative;
        white-space: nowrap;
        flex: 1;
        width: auto;
        max-height: 40px;
        line-height: 40px;
        letter-spacing: 2px;
        padding-right: 10px;
        text-align: right;
        transition: 0.3s;

        a {
          transition: 0.3s;
          text-decoration: none;
          color: #606975;
        }

        .iconfont {
          position: absolute;
          right: -30px;
          bottom: 0px;
          font-size: 20px;
          transition: 0.3s;
        }

        &::before {
          content: "";
          position: absolute;
          bottom: 0;
          left: 0;
          height: 2px;
          width: 100%;
          background-color: #2d3436;
          transition: 0.3s;
          transform: scaleX(0);
          transform-origin: right;
        }

        &::after {
          content: "";
          position: absolute;
          bottom: 2px;
          right: 5px;
          height: 20px;
          width: 60%;
          background-color: #ffcccc;
          transition: 0.3s;
          transform: scaleY(0);
          transform-origin: bottom;
          z-index: -1;
        }

        &:hover a {
          color: #f5f6fa;
          text-shadow: 2px 2px 2px #718093;
        }

        &:hover::before {
          transform: scaleX(1);
        }

        &:hover::after {
          transform: scaleY(1);
        }

        &:hover .iconfont {
          text-shadow: 0px 0px 2px #718093;
        }

        &:hover .icon-file_cpp {
          -webkit-animation: tada 2s linear infinite;
          animation: tada 2s linear infinite;
          color: #7d5fff;
        }

        &:hover .icon-logo-python {
          -webkit-animation: pulse 2s linear infinite;
          animation: pulse 2s linear infinite;
          color: #ffeaa7;
        }

        &:hover .icon-web-link {
          -webkit-animation: wrench 2.5s ease infinite;
          animation: wrench 2.5s ease infinite;
          transform-origin-x: 90%;
          transform-origin-y: 35%;
          transform-origin-z: initial;
          color: #81ecec;
        }

        &:hover .icon-fengkuangdaqiqiu {
          -webkit-animation: vertical 2s ease infinite;
          animation: vertical 2s ease infinite;
          color: #ff7675;
        }

        &:hover .icon-Comment4 {
          -webkit-animation: tada 2s linear infinite;
          animation: tada 2s linear infinite;
          color: #00b894;
        }

        &:hover .icon-sakura-flower {
          -webkit-animation: roteInf 2s linear infinite;
          animation: roteInf 2s linear infinite;
          color: #fab1a0;
        }

        &:hover .icon-order-play-fill {
          -webkit-animation: pulse 2s linear infinite;
          animation: pulse 2s linear infinite;
          color: #e056fd;
        }
      }
    }
  }

  .site-title-link {
    box-sizing: border-box;
    position: absolute;
    padding: 0;
    margin: 0;
    bottom: 30px;
    left: 30px;
    width: auto;
    height: auto;
    text-align: left;

    ul {
      list-style: none;
      padding: 0;

      li {
        //box-sizing: border-box;
        position: relative;
        margin-top: 5px;
        padding-left: 5px;
        padding-top: 2px;
        line-height: 1.3;
        font-weight: bold;
        user-select: none;

        a {
          cursor: pointer;
          transition: 0.5s;
          color: #2f3542;
          text-decoration: none;
        }

        &:hover {
          transition: 0.5s;
          background-color: #2f3542;
        }

        &:hover a {
          color: #ffffff;
          font-size: 20px;
        }

        &:nth-child(n):hover::after {
          transform: scaleY(1);
        }

        &::after {
          content: "";
          position: absolute;
          bottom: -13px;
          right: -3px;
          font-size: 0.7em;
          font-weight: 300;
          border-top: solid 1px #ffffff;
          transition: 0.5s;
          transform: scaleY(0);
          transform-origin: top;
        }

        &:nth-child(1)::after {
          content: "Category";
        }

        &:nth-child(2)::after {
          content: "Archive";
        }

        &:nth-child(3)::after {
          content: "About";
        }

        &:nth-child(4)::after {
          content: "Site-Link";
        }

      }

      .soc {
        margin-top: 10px;
        padding: 0;
        box-sizing: border-box;
        z-index: 1;

        &:hover {
          background-color: transparent;
        }

        &:hover a {
          background: transparent;
          color: transparent;
          font-size: 20px;
          box-shadow: 0px 0px 5px transparent;
        }

        .email-show-stop {
          span {
            transform: scaleX(1) !important;
          }

          .email-div {
            transform: scaleY(1) scaleX(1) !important;
          }
        }

        a {
          position: relative;
          box-sizing: border-box;
          display: inline-block;
          padding: 0;
          margin-left: 5px;
          border-radius: 50%;
          width: 30px;
          height: 30px;
          text-align: center;
          vertical-align: middle;
          line-height: 30px;
          color: rgba(45, 52, 54, 1.0);
          font-size: 20px;

          .iconfont {
            padding: 0;
            font-size: 20px;
          }

          span {
            position: absolute;
            left: 0;
            top: 0;
            display: inline-block;
            width: auto;
            padding-left: 40px;
            padding-right: 10px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            font-size: 10px;
            border-radius: 20px;
            background-color: rgba(245, 246, 250, 1.0);
            box-shadow: 0px 0px 5px rgba(113, 128, 147, 1.0);
            z-index: -1;
            transition: 0.3s;
            transform: scaleX(0);
            transform-origin: 10px 0px;
          }

          .wechat-img {
            position: absolute;
            width: 120px;
            height: 120px;
            top: -130px;
            left: 0px;
            border: 0px;
            transition: 0.5s;
            transform-origin: 0% 100%;
            transform: scaleY(0) scaleX(0);
          }

          .email-div {
            position: absolute;
            width: auto;;
            height: 30px;
            top: -40px;
            left: 0px;
            border: 0px;
            text-align: center;
            line-height: 30px;
            font-size: 10px;
            padding-left: 10px;
            transition: 0.5s;
            transform-origin: 0% 100%;
            transform: scaleY(0) scaleX(0);
          }

          &:hover {
            color: rgba(245, 246, 250, 1.0);
            background: rgba(245, 246, 250, 1.0);
          }

          &:nth-child(1):hover {
            background: rgba(45, 52, 54, 1.0);
          }

          &:nth-child(1):hover span {
            color: rgba(45, 52, 54, 1.0);
          }

          &:nth-child(2):hover {
            background: rgba(0, 184, 148, 1.0);

            .wechat-img {
              transform: scaleY(1) scaleX(1);
            }
          }

          &:nth-child(2):hover span {
            color: rgba(0, 184, 148, 1.0);
          }

          &:nth-child(3):hover {
            background: rgba(255, 118, 117, 1.0);

            .email-div {
              transform: scaleY(1) scaleX(1);
            }
          }

          &:nth-child(3):hover span {
            color: rgba(255, 118, 117, 1.0);
          }

          &:hover span {
            transform: scaleX(1);
          }
        }

      }
    }

    .site-info {
      margin-top: 10px;
      padding-top: 0;
      font-size: 12px;
      font-weight: 700;
      padding-left: 5px;
      user-select: none;
      color: #636e72;

      p {

      }

      a {
        cursor: pointer;
        transition: 0.5s;
        color: #636e72;
        text-decoration: none;
      }
    }
  }
}

#link {
  position: fixed;
  right: 0;
  top: 0;
  letter-spacing: 1.3px;
  width: auto;
  height: 10px;
  color: rgba(149, 165, 166, 1.0);
  font-size: 0.6em;
  padding: 10px;
}

.login-register {
  position: fixed;
  bottom: 5px;
  right: 5px;
  font-family: "Noto Serif SC", "HiraMinProN-W6", "Source Han Serif CN", "Source Han Serif SC", "Source Han Serif TC", serif;
  margin-top: 10px;
  margin-bottom: 5px;
  padding: 5px;
  border-radius: 8px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  font-weight: 900;
  letter-spacing: 1.3px;
  line-height: 1.3;
  user-select: none;
  transition: 0.5s;
  color: #203744;
  z-index: 1;
  transform-style: preserve-3d;
  backface-visibility: hidden;

  img {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 40px;
    height: 40px;
  }

  a, span {
    white-space: nowrap; /*强制span不换行*/
    -webkit-backface-visibility: hidden; /* Chrome ºÍ Safari */
    -moz-backface-visibility: hidden; /* Firefox */
    -ms-backface-visibility: hidden; /* Internet Explorer */
    transition: 0.3s;
  }

  span {
    display: inline-block;
    position: relative;
    z-index: 2;
  }

  a {
    display: inline-block;
    position: absolute;
    left: 0;
    bottom: 5px;
    text-decoration: none;
    color: #203744;
    padding-right: 0;
    margin-right: 0;
  }

  .login {
    position: relative;
    bottom: 0px;
  }

  .cur-user {
    letter-spacing: 0px;
    font-size: 0.8em;
    margin-bottom: 2px;

    &::after {
      content: "";
      width: 0;
      height: 2px;
      position: absolute;
      bottom: -5px;
      left: 0;
      background: #f09199;
      transition: 0.3s;
      transform-origin: left;
    }
  }

  &:hover {
    .wrench-use {
      animation-play-state: running;
    }

    span {
      color: #478384;
    }

    .cur-user {
      color: #1f3134;
    }

    .cur-user::after {
      width: 100%;
    }
  }
}

.footer-page {
  width: auto;
  height: auto;
  //background-color: red ;
  position: fixed;
  display: flex;
  flex-direction: column;
  right: 0;
  bottom: 150px;
  font-family: "Noto Serif SC", "HiraMinProN-W6", "Source Han Serif CN", "Source Han Serif SC", "Source Han Serif TC", serif;
  z-index: 1;
  box-sizing: border-box;

  a {
    text-decoration: none;
    color: #f5f6fa;
  }

  .cur-page {
    position: absolute;
    bottom: -30px;
    right: 0;
    display: block;
    width: auto;
    line-height: 22px;
    font-size: 14px;
    font-weight: 700;
    user-select: none;
    //background:linear-gradient(to right,rgba(245, 246, 250,1.0),rgba(178, 190, 195,1.0)) ;
    background-color: #c9171e;
    color: rgba(245, 246, 250, 1.0);
    border-radius: 5px;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    box-shadow: 0px 0px 5px rgba(47, 54, 64, 0.7);
    padding-left: 5px;
    padding-right: 2px;
    letter-spacing: 2px;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition-duration: 0.5s;
  }

  .page-jump-list-show {
    transform: translateX(0%) !important;
  }

  .page-jump-list {
    position: absolute;
    bottom: -60px;
    right: 0;
    width: auto;
    height: auto;
    line-height: 22px;
    font-size: 14px;
    font-weight: 700;
    transition-duration: 0.5s;
    list-style: none;
    transform: translateX(100%);
    transition-duration: 0.5s;
    user-select: none;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;

    &::after {
      content: "";
      position: absolute;
      bottom: -1px;
      right: 0;
      width: 110%;
      height: 1px;
      background: #a31515;
    }

    a.page-jump {
      position: relative;
      margin-right: 8px;
      cursor: pointer;
      box-sizing: border-box;
      transition-duration: 0.2s;
      color: #0f1423;

      &::after {
        content: "";
        position: absolute;
        top: -1px;
        right: 0;
        width: 110%;
        height: 1px;
        background: #a31515;
        transition-duration: 0.2s;
        transform: scaleX(0);
      }

      &:hover {
        color: #a31515;
      }

      &:hover::after {
        transform: scaleX(1);
      }
    }
  }

  .page-prev, .page-next {
    display: block;
    position: relative;
    width: 2.2em;
    font-size: 12px;
    font-weight: 700;
    padding: 10px;
    padding-left: 0px;
    line-height: 22px;
    letter-spacing: 3px;
    text-align: center;
    background: #2f3640;
    writing-mode: tb-rl;
    //margin-top: 5px ;
    margin-bottom: 2px;
    border-radius: 7px;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    box-shadow: 0px 0px 5px rgba(47, 54, 64, 1.0);
    transition: 0.3s;
    transform-origin: right;
    transform: translateX(1em);

    &:hover {
      transform: translateX(0em);
    }
  }

  .page-next {
    opacity: 0.8;
  }
}

//body .to-board {
//    position: fixed;
//    font-size: 12px;
//    bottom: 60px;
//    left: 0;
//    border-radius: 0 5px 5px 0;
//    width: 35px;
//    left: -17px;
//    color: #fff;
//    font-size: 13px;
//    padding: 5px 0;
//    padding-top: 5px;
//    padding-right: 0;
//    padding-bottom: 5px;
//    padding-left: 5px;
//    font-weight: 700;
//    z-index: 99;
//    visibility: visible;
//    writing-mode: vertical-rl;
//    transition-duration: .5s, .5s;
//    border-radius: 0 6px 6px 0 !important;
//    background-color: orange;
//    user-select: none;
//    cursor: pointer;
//    text-decoration: none;
//
//    &:hover {
//        padding-left: 17px;
//    }
//}

//.chang-sty {
//    position: fixed;
//    box-sizing: border-box;
//    list-style: none;
//    left: 22px;
//    bottom: 163px;
//    width: auto;
//    height: 32px;
//    cursor: pointer;
//    z-index: 99;
//    visibility: visible;
//    transition-duration: 0.5s;
//    border-radius: 0 6px 6px 0 !important;
//    background-color: rgba(251, 185, 41, 1.0);
//    user-select: none;
//    font-weight: 300;
//    font-size: 13px;
//    color: #fff;
//    display: flex;
//    flex-direction: row-reverse;
//    justify-content: flex-start;
//    align-items: flex-end;
//    padding: 5px;
//    transform: translateX(-100%);
//
//    i {
//        position: relative;
//        font-size: 13px;
//        font-weight: 300;
//        width: auto;
//        height: 18px;
//        box-sizing: border-box;
//    }
//
//    li {
//        position: relative;
//        box-sizing: border-box;
//        padding: 2px 5px;
//        margin-right: 10px;
//        background-color: rgba(251, 185, 41, 1.0);
//        transition-duration: 0.3s;
//        border-radius: 5px 5px 0 0;
//        width: auto;
//        height: 100%;
//        font-size: 14px;
//        letter-spacing: 1.3px;
//
//        &:hover {
//            height: 210%;
//            //padding-bottom: 10px ;
//            //transform: translateY(-100%);
//        }
//    }
//
//    &:hover {
//        left: 0px;
//        transform: translateX(0%);
//    }
//}

div.extra-screen {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 100;
  width: 35vw;
  max-width: 600px;
  height: 78vh;
  max-height: 800px;
  box-shadow: 0 0 30px rgba(178, 190, 195, 1.0);
  // background: rgba(223, 230, 233, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 0;
  background-color: rgba(255, 255, 255, 0.9);
  font-family: sohne, "Helvetica Neue", Helvetica, Arial, sans-serif;
  transition: 0.5s;

  .extra-screen-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    transition: 0.3s;
    z-index: 110;
    cursor: pointer;
    transform: rotateZ(90deg);

    i {
      position: relative;
      display: inline-block;
      width: 100%;
      height: 100%;
      font-size: 25px;
      color: rgba(19, 72, 87, 1.0);

    }
  }

  ul.tools-grid {
    position: sticky;
    width: 100%;
    top: 0;
    left: 0;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 0px;
    margin-bottom: 20px;
    z-index: 100;

    .tools-box {
      position: relative;
      height: 100px;
      width: 100px;
      border-radius: 0;
      margin: 15px 10px;
      // background: transparent;
      background: rgba(178, 190, 195, .15);
      text-decoration: none;

      border: 1.5px solid rgba(99, 110, 114, .15);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;


      span, i {
        position: relative;
        background: transparent !important;
        user-select: none;
        transition: 0.3s;
      }

      i {
        width: 30%;
        height: 30%;
        text-align: center;
        font-size: 16px;
        color: rgba(99, 110, 114, 1.0);
        display: inline-block;
      }

      span {
        font-size: 12px;
        font-weight: 300;
        letter-spacing: 1.3px;
        color: rgba(99, 110, 114, 1.0);
        margin-top: 10px;
      }

      &:hover {
        span, i {
          color: rgba(130, 17, 31, 1.0);
          text-shadow: 0 0 20px rgba(129, 236, 236, 0.2);
        }
      }
    }
    .tiny_long_tools-box {
      width: 100px;
      height: 60px;
    }
    .day_sty, .night_sty {
      height: 60px;
      width: 130px;
      transition: 0.3s;
    }

    .day_sty {
      width: 60px;
      border: 2px solid rgba(225, 112, 85, 0.1);

      i, span {
        color: rgba(214, 48, 49, 1.0);
      }

      i {
        width: auto;
        height: auto;
        font-size: 20px;
      }

      span {
        display: none;
      }

      &:hover {
        span, i {
          color: rgba(214, 48, 49, 1.0);
        }

      }
    }
  }

  ul.daily_news_list {
    position: relative;
    width: 100%;
    flex: 1;
    list-style: none;
    overflow: auto;

    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */

    &::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    .daily_news {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      width: 100%;
      height: auto;
      margin-bottom: 35px;

      .news-info {
        position: relative;
        width: auto;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 0 10px;

        #head-img {
          position: relative;
          width: 80px;
          height: 80px;
          border: 2px solid rgba(178, 190, 195, 0.5);
        }

        .right-info {
          position: relative;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: flex-start;
          margin-left: 15px;

          .autor-status {
            position: relative;

            .autor {
              position: relative;
              letter-spacing: 1.3px;
            }

            .status {
              position: relative;
              margin-left: 10px;
              display: inline-block;
              padding: 2px 10px;
              background: rgba(0, 184, 148, .9);
              border-radius: 3px;
              font-size: 12px;
              color: white;
            }

          }

          .time-describe {
            position: relative;
            color: rgba(99, 110, 114, 1.0);
            font-size: 12px;
            letter-spacing: 1.3px;
            margin-top: 5px;
          }

          .other-info {
            position: relative;
            display: flex;

            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            margin-top: 10px;

            i.iconfont {
              position: relative;
              color: rgba(214, 48, 49, 1.0);
              font-size: 26px;
              cursor: pointer;
              font-weight: 300;
              user-select: none;
            }

            span.news-id {
              position: relative;
              margin-left: 10px;
              font-size: 12px;
              user-select: none;
            }

            .news-title {
              position: relative;
              flex: 1;
              display: inline-block;
              white-space: nowrap;
              margin-left: 10px;
              padding-left: 10px;
              border-left: 1px solid rgba(99, 110, 114, 1.0);
              letter-spacing: 1.3px;
              color: rgba(45, 52, 54, 1.0);
            }
          }
        }
      }

      p.news-body {
        position: relative;
        display: inline-block;
        box-sizing: border-box;
        padding: 10px;
        width: 100%;
        letter-spacing: 1.3px;
        line-height: 1.4;
        font-size: 14px;

      }

      &::after {
        content: "";
        position: relative;
        width: calc(100% ~"-" 20px);
        height: 1px;
        background: rgba(175, 46, 43, 1.0);
        transform: translateX(10px);
      }
    }
  }
}

div.extra-screen.extra-screen-hidden {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 30px;
  height: 30px;
  overflow: hidden;

  .extra-screen-btn {
    transform: rotateZ(-90deg);
  }

  ul {
    display: none;
  }

  &:hover {
    width: 40px;
    height: 40px;
  }
}

.moon-back {
  position: fixed;
  width: 100px;
  height: 100px;
  top: 40px;
  right: 40px;
  background-image: url("../img/moon_2.png");
  z-index: 12;
  cursor: pointer;
}

.moon-light {
  position: fixed;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  z-index: 11;
  top: 40px;
  right: 40px;

  &::after {
    content: "";
    position: absolute;
    width: 70%;
    height: 70%;
    top: 50%;
    margin-top: -40%;
    left: 50%;
    margin-left: -40%;
    border-radius: 50%;
    background-color: #fab1a0;
    -webkit-filter: blur(40px);
    -moz-filter: blur(40px);
    -ms-filter: blur(40px);
    filter: blur(30px);
  }
}


.moon-font {
  position: fixed;
  width: 100px;
  height: 100px;
  right: 200px;
  bottom: 200px;
  background-image: url("../img/pic3.png");
  z-index: 13;
}

.lightCover {
  position: fixed;
  width: 0;
  height: 0;
  z-index: 10;
}

#canvas_sakura {
  z-index: 13 !important;
}

.fake-info {
  position: fixed;
  right: 80px;
  bottom: 40px;
  user-select: none;
  color: rgba(99, 110, 114, 0.8);
  z-index: 13;

  h1 {
    font-size: 20px;
    letter-spacing: 1.1px;
    font-weight: 400;
  }

  p {
    font-size: 14px;
    letter-spacing: 0;
  }
}

.moon-hidden {
  display: none !important;
}

#preogressbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 7px;
  z-index: 13;
  background-image: linear-gradient(to top, #ff7675, #fab1a0, #81ecec);
  animation-name: scrossTurn;
  animation-duration: 5s;
  animation-play-state: running;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.72, 0.01, 1, 1);
  animation-delay: 0s;
  box-shadow: 0 0 10px rgba(99, 110, 114, 0.5);
}

#preogressbar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 100%;
  background-image: linear-gradient(to top, #fab1a0, #ecf0f1, #81ecec, #00b894);
  filter: blur(40px);
}

#preogressbar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 100%;
  background-image: linear-gradient(to top, #fab1a0, #ecf0f1, #81ecec, #00b894);
  filter: blur(80px);
}

#scrollpath {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
}

@media only screen and (max-height: 650px) {
  .side-container {
    .site-title-link {
      ul {
        display: flex;
        box-sizing: border-box;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        font-size: 14px;

        li {

          padding: 5px;

          &:hover a {
            color: #ffffff;
            font-size: 14px;
          }
        }

        .soc {
          width: 100%;
          height: auto;
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
        }
      }
    }
  }
}